<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript">
  $(document).on('click','a.product-item-search-link',function(e) {
    e.preventDefault();
    var href = $(this).prop('href');
    var idx = href.indexOf('@#');
    if (idx >= 0) {
      var value = href.substring(idx + 2);
      value = value.split('@#');
      var id = value[0];
      var sku = value[1];
      var desc = decodeURIComponent(value[2]);
      $('#selected-product-name').text(desc);
      $('#selectedSalesProductId').val(id);
      $('#product-item-dialog-search').remove();
      $('#product-item-search-div').empty();
    }
  });

  $(function() {
    $('#product-item-dialog-search').dialog({
      height : 500,
      width : 750,
      modal : true,
      close : function() {
        $(this).remove();
        $('#product-item-search-div').empty();
      }
    });

    jQuery("#list-product-item-search")
        .jqGrid(
            {
              url : '${pageContext.request.contextPath}/inventory/productAttribute/getProductItemSearch.action',
              datatype : "json",
              colNames : ['ID','<s:property value="getText(\'field.stock.keeping.unit\')" />',
                  '<s:property value="getText(\'field.product.name\')" />',
                  '<s:property value="getText(\'field.product.attribute.name\')" />'],
              colModel : [{
                name : 'id',
                index : 'id',
                editable : false,
                hidden : true,
                width : 10
              },{
                name : 'sku',
                index : 'sku',
                editable : true,
                formatter : createHyperlink,
                width : 200
              },{
                name : 'productName',
                index : 'productName',
                editable : true,
                formatter : createHyperlink,
                width : 200
              },{
                name : 'name',
                index : 'name',
                width : 350,
                editable : false,
                sortable : false
              }],
              jsonReader : {
                root : "rows",
                page : "page",
                total : "total",
                records : "records",
                repeatitems : false,
                id : "id",
                cell : "",
                userdata : ""
              },
              rowNum : 10,
              rowList : [10,20,30],
              pager : '#paging-product-item-search',
              sortname : 'name',
              viewrecords : true,
              sortorder : "asc",
              multiselect : false,
              autowidth : true,
              height : 350,
              caption : "<s:property value='getText(\"title.list.product\")' />"
            }).navGrid('#paging-product-item-search',{
          edit : false,
          add : false,
          del : false,
          view : false,
          search : false,
        });
  });

  function createHyperlink(cellValue,options,rowObject) {
    var url = "<a class='product-item-search-link' href='@#" + rowObject.id + "@#" + rowObject.sku + "@#" + rowObject.description +"'>"
        + cellValue + "</a>";
    return url;
  }
</script>
<div id="product-item-dialog-search"
  title='<s:property value="getText('title.list.product.attribute')"/>'>
  <div style="width: 700px;" id="main-product-item-search">
    <table id="list-product-item-search"></table>
    <div id="paging-product-item-search"></div>
  </div>
</div>